<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .rotate {
        transform: rotate(90deg);
      }

      .translate {
        transform: translateX(200px);
      }
      .scale {
        transform: scale(5);
      }
      .skew {
        transform: skew(90deg);
      }
    </style>
  </head>
  <body></body>

  <script>
    // 图片路径
    var img = "./product-holding-experience-bgimg.png";

    function getBase64(imgUrl) {
      window.URL = window.URL || window.webkitURL;
      var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          var blob = this.response;
          console.log("blob", blob);
          // 至关重要
          let oFileReader = new FileReader();
          oFileReader.onloadend = function (e) {
            // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
            console.log(e.target.result);
          };
          oFileReader.readAsDataURL(blob);
        }
      };
      xhr.send();
    }

    getBase64(img);
  </script>
</html>
